<template>
  <div>
    <template slot="header">
      <div class="header">参赛分组</div>
    </template>

    <el-row>
      <el-col :span="24">
        <div class="team-btn">
          <el-button
            type="text"
            v-for="age in gruop_age"
            :key="age"
            @click="ageCheck1(age)"
          >{{age}}岁组</el-button>
        </div>

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <el-button type="text" @click="centerDialogVisible = true">手动排列名单</el-button>

              <!-- 人数选择弹框 -->
              <el-dialog title="名单人数修改" :visible.sync="centerDialogVisible" width="30%" center>
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="每组人数">
                    <el-input v-model="form.date"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="centerDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="groupChange();centerDialogVisible = false">提交</el-button>
                </span>
              </el-dialog>
            </span>

            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="dataExport()"
            >导出excel</el-button>
          </div>
          <ul>
            <li v-for="(tabs,index) in tableData" :key="index">
              <el-col :span="24" v-for="(tab,index) in tabs" :key="index">
                <div v-for="(t,index) in tab" :key="index">
                  <div class="title">{{t[0].age}}岁{{t[0].gender.value}}子{{index+1}}组</div>
                  <el-table :data="t" border style="width: 100%">
                    <el-table-column type="index" :index="indexMethod" align="center"></el-table-column>
                    <el-table-column prop="student_name" label="参赛姓名" align="center"></el-table-column>
                    <el-table-column prop="age" label="年龄" align="center"></el-table-column>
                    <el-table-column prop="gender.value" label="性别" align="center"></el-table-column>
                    <el-table-column prop="ID_number" label="身份证号" align="center"></el-table-column>
                    <el-table-column prop="contact_name" label="联系人姓名" align="center"></el-table-column>
                    <el-table-column prop="contact_phone" label="联系人电话" align="center"></el-table-column>
                  </el-table>
                </div>
              </el-col>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
export default {
  name: "team",

  data() {
    return {
      // 手动排列名单弹框
      centerDialogVisible: false,
      // 分组人数设置
      form: {
        date: 10,
        id: 0
      },
      //表格列表数据
      tableData: [],
      age: 1,
      gruop_age: [1, 2, 3, 4, 5]
    };
  },
  beforeMount: function() {
    this.getGroupData();
  },
  computed: {
    getSeasonId() {
      return this.$store.state.seasonId;
    }
  },
  watch: {
    // 利用watch方法检测seasonId变化,动态监听路由：
    getSeasonId: function(old, newd) {
      this.getStudentData();
    }
  },
  mounted: function() {},
  methods: {
    // 获取分组数据
    getGroupData() {
      let that = this;
      that.$api
        .getGroupInfo({
          params: {
            school: that.$store.state.school_id,
            competition_season: 1
          }
        })
        .then(res => {
          if (res.data.results.length > 0) {
            that.form.date = res.data.results[0].num;
            that.form.id = res.data.results[0].id;
          }
          that.getStudentData();
        })
        .catch(err => {
          that.$message({
            type: "error",
            message: err
          });
        });
    },
    // 修改分组信息
    groupChange() {
      let that = this;
      if (that.form.id === 0) {
        let post_data = {
          competition_season: 1,
          school: that.$store.state.school_id,
          num: that.form.date,
          season: that.$store.state.seasonId
        };
        that.$api
          .createGroupInfo(post_data)
          .then(res => {
            // console.log(res.data)
            that.form.date = res.data.num;
            that.form.id = res.data.id;
            that.getStudentData();
          })
          .catch(err => {
            that.$message({
              type: "error",
              message: err
            });
          });
      } else {
        let edit_post = {
          num: that.form.date
        };
        that.$api
          .editGroupInfo(that.form.id, edit_post)
          .then(res => {
            that.form.date = res.data.num;
            that.form.id = res.data.id;
            that.getStudentData();
          })
          .catch(err => {
            that.$message({
              type: "error",
              message: err
            });
          });
      }
    },
    // 获取参赛学员信息
    getStudentData() {
      let that = this;
      that.$api
        .getStudentGroupInfo({
          params: {
            group_num: that.form.date,
            match_date: that.$store.state.seasonDate, //赛季获取url传值
            age: that.age,
            season: that.$store.state.seasonId
          }
        })
        .then(res => {
          that.tableData = res.data.results;
        })
        .catch(err => {});
    },
    // 索引排序
    indexMethod(index) {
      return index * 1 + 1;
    },

    // 年龄选择
    ageCheck1(age) {
      this.age = age;
      this.getStudentData();
    },
    // 获取所有参赛学员信息，导出Excel表格
    dataExport() {
      let that = this;
      const tHeader = [
        "校区名称",
        "姓名",
        "号码牌",
        "性别",
        "身份证号",
        "年龄",
        "组别",
        "姓名",
        "联系人姓名",
        "联系人电话"
      ];
      const filterVal = [
        "school",
        "student_name",
        "number",
        "gender",
        "ID_number",
        "group",
        "contact_name",
        "contact_phone"
      ];

      let res_data = that.tableData;
      let arr = [];
      res_data.forEach(element => {
        for (let k in element) {
          let excelDatas = [];
          element[k].forEach((item, index) => {
            let men_group_list = [];
            item.forEach(el => {
              let men_group_json = {};
              let id;
              men_group_json.school = el.school.school_name;
              men_group_json.student_name = el.student_name;
              if (String(el.id).length === 1) {
                id = `00${String(el.id)}`;
              } else if (String(el.id).length === 2) {
                id = `0${String(el.id)}`;
              } else {
                id = String(el.id);
              }
              men_group_json.number = `${that.$store.state.school_id}${id}`;
              men_group_json.gender = el.gender.value;
              men_group_json.ID_number = el.ID_number;
              if (k === "0") {
                men_group_json.group = `${that.age}岁男子${index + 1}组`;
              } else {
                men_group_json.group = `${that.age}岁女子${index + 1}组`;
              }
              men_group_json.contact_name = el.contact_name;
              men_group_json.contact_phone = el.contact_phone;
              men_group_list.push(men_group_json);
            });
            if (men_group_list) {
              let sheetName = `${that.age}岁男子${index + 1}组`;
              if (k === "1") {
                sheetName = `${that.age}岁女子${index + 1}组`;
              }
              let excel_json = {
                tHeader,
                filterVal,
                tableDatas: men_group_list,
                sheetName: sheetName
              };
              excelDatas.push(excel_json);
            }
          });
          arr = arr.concat(excelDatas);
        }
      });
      // console.log(arr)
      that.$commonFun.json2excel(
        arr,
        `${that.$store.state.SchoolName}${that.age}岁平衡车比赛名单`,
        true,
        "xlsx"
      );
    }
  }
};
</script>


<style scoped>
.pagination {
  margin: 30px 20px;
  /* background-color: rgb(255, 215, 0); */
  /* background-color: rgb(144, 238, 144) */
}

li {
  list-style: none;
}

.title {
  margin: 20px 0;
  font-weight: 600;
}

.box-card {
  padding-bottom: 50px;
}

.header {
  text-align: center;
  font-weight: 550;
  font-size: 20px;
}

.team-btn {
  text-align: center;
  margin-bottom: 20px;
  font-size: 20px;
}
</style>
